import QtQuick 1.0

Rectangle {
    id: rectangle2
    width: 360
    height: 640
    color: "white"
    property string city: lineEdit.text
//    property alias day : dayText.text
    property alias high : temperaTure.text

    XmlListModel {
        // property int index
        id: forecastModel
        source: "http://www.google.com/ig/api?weather=" + city
        query: "/xml_api_reply/weather/forecast_conditions"

        XmlRole { name: "day_of_week"; query: "day_of_week/@data/string()" }
        XmlRole { name: "low"; query: "low/@data/string()" }
        XmlRole { name: "high"; query: "high/@data/string()" }
        //XmlRole { name: "icon"; query: "icon/@data/string()" }
        XmlRole { name: "condition"; query: "condition/@data/string()" }
    }

    XmlListModel {
        source: "http://www.google.com/ig/api?weather=" + city
        query: "/xml_api_reply/weather/current_conditions"
        id: currentModel

        XmlRole { name: "day_of_week"; query: "" }
        XmlRole { name: "condition"; query: "condition/@data/string()" }
        XmlRole { name: "high"; query: "temp_c/@data/string()" }
        XmlRole { name: "humidity"; query: "humidity/@data/string()" }
        //XmlRole { name: "icon"; query: "icon/@data/string()" }
        XmlRole { name: "wind"; query: "wind_condition/@data/string()" }
    }

    Rectangle {
        id: topicRect

        anchors.left: parent.left
        anchors.right: parent.right
        color: "white"
        height: 30

        Rectangle {
            id: exitbutton
            x: 2
            y: 2
            radius: 5
            color: "white"
            border.color: "white"
            border.width:  2
            height: parent.height - 3
            width: height
            Text {
                //text: "X"
                color: "black"
                font.pixelSize: 20
                anchors.centerIn: parent
            }
            MouseArea {
                anchors.fill: parent
                anchors.rightMargin: 28
                anchors.margins: -10
                onClicked: {
                    Qt.quit()
                }
            }

        }

        Text {
            id: applicationname
            color: "lightgray"
            font.pixelSize: 15
            text: "Weather Dude"
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            font.family: "Nokia Large"
        }

    }

    Text {
        x: 0
        anchors.top: topicRect.bottom
        anchors.topMargin: 10
        font.pixelSize: 20
        text: ""
        id: cityText
    }

    Rectangle {
        anchors.top: parent.top
        anchors.topMargin: 14
        anchors.left: cityText.right
        anchors.right: parent.right
        anchors.margins: 10
        id: editRect
        x: 10
        y: 10
        width: 246
        color: "white"
        border.width: 2
        border.color:  "white"
        radius: 2
        anchors.rightMargin: 100
        anchors.leftMargin: 10
        height: 30

        TextInput {
            x: 0
            font.pixelSize: 40
            anchors.verticalCenter: parent.verticalCenter
            id: lineEdit
            text: "Tampere"
            smooth: true
            font.family: "Nokia Large"
            focus: true
        }
    }

    Flickable {
        id: flickArea
        flickableDirection: "HorizontalFlick"
        anchors.top: editRect.bottom
        anchors.margins: 50
        x: 10
        width: 340
        height: 200
        anchors.topMargin: 40
        contentWidth: rowArea.width
        Row {
            id: rowArea
            spacing: 10
            Repeater {
                model: currentModel
                delegate: WeatherInfo {
                    width: 110
                    height: 128
                    day: "Today"
                }
            }
            Repeater {
                model: forecastModel
                delegate: WeatherInfo {
                    width: 110
                    height: 128
                }
            }
        }
    }

    Image {
        id: bigImage
        anchors.fill: parent
        anchors.topMargin: 225
        sourceSize.height: 420
        anchors.margins: 0
        fillMode: Image.PreserveAspectCrop
        source: "Vitru_0.png";

        Text {

                id: temperaTure
                y: 170
                text: high
                anchors.left: parent.left
                anchors.leftMargin: 34
                anchors.verticalCenter: parent.verticalCenter
                opacity: 0.6
                font.family: "Nokia Large Multiscript"
                color: "#b56a20"
                font.pixelSize: 46
                z: 2
        }
    }

}
